<template>
	<view class="index-cate-box">
		
		<!--  顶部导航栏  -->
		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
			<view class="cu-bar fixed bg-fa" :style="style">
				<view class="logo-box">
					<text style="color: #FFFFFF;">logo</text>
					<!-- <image class="logo" src="~/static/logo2.png" /> -->
				</view>
				<view class="input-box" @tap="goSearch">
					请输入搜索内容
					<text class="iconfont iconsousuo"></text>
				</view>
			</view>
		</view>
		<!--  顶部导航栏  -->
		
		<view class="left-cate-box" :style="{'height':`calc(100% - ${CustomBar}px)`,'top':CustomBar+'px'}">
			<view class="scroll-item" v-for="(item,index) in list" :key="index" :class="{'item-action':cateIndex == index}" @tap="cateSwitch(index)">
				<text class="scroll-text">
					{{item.text}}
				</text>
			</view>
		</view>
		
		<view class="right-cate-box" :style="{'height':`calc(100% - ${CustomBar}px)`,'top':CustomBar+'px'}">
			<view class="scroll-item" v-for="(item,index) in children" :key="index" @tap="goSearchList(item.text)">
				<text class="right-text">{{item.text}}</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		name:"cate",
		data(){
			return{
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				//  显示第几个分类 
				cateIndex:0,
				list:[],
				children:[]
			}
		},
		computed: {
			style() {
				var StatusBar= this.StatusBar;
				var CustomBar= this.CustomBar;
				var bgImage = this.bgImage;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			}
		},
		methods:{
			
			goSearch(){
				uni.navigateTo({
					url:"/pages/search/search"
				})
			},
			
			goSearchList(text){
				this.$store.commit("search/setSearchValue",text)
				uni.navigateTo({
					url:"/pages/search/list"
				})
			},
			
			cateSwitch(index){
				this.cateIndex = index
				this.children = this.list[index].children
			},
			
			/*  获取分类列表  */
			getList(){
				this.$ajax("allCateList",{},'GET').then((res)=>{
					if(res.code>=0){
						this.list = res.data
						this.children = res.data[this.cateIndex].children
					}
				}).catch((err)=>{
					
				})
			}
			
		},
		onLoad() {
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
	.index-cate-box{
		width: 100%;
		min-height: 100%;
		background: #f8f8f8;
		.logo-box{
			width: 160rpx;
			flex-grow: 0;
			padding-left: 20rpx;
			height: 60rpx;
		}
		.logo{
			width: 140rpx;
			height: 60rpx;
		}
		.input-box{
			flex-grow: 1;
			min-width: calc(100% - 200rpx);
			margin-left: 20rpx;
			margin-right: 20rpx;
			height: 60rpx;
			border-radius: 60rpx 60rpx;
			background-color: #FFFFFF;
			color: #8B8B8B;
			font-size: 24rpx;
			text-align: left;
			padding-left: 20rpx;
			line-height: 60rpx;
			position: relative;
			.iconfont{
				position: absolute;
				right: 20rpx;
				color: #686868;
				font-size: 32rpx;
				top: 14rpx;
				line-height: 32rpx;
			}
		}
		
		.scroll-item{
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			margin-bottom: 32rpx;
			margin-top: 20rpx;
			padding-left: 10rpx;
		}
		
		
		.left-cate-box{
			position: absolute;
			width: 240rpx;
			height: 100%;
			left: 0;
			top:0;
			bottom: 0;
			overflow-x: hidden;
			overflow-y: scroll;
			background: #F8F8F8;
			.scroll-text{
				padding-left: 8rpx;
				color: #1a1a1a;
				font-size: 24rpx;
				display: inline-block;
				width: 100%;
				line-height: 50rpx;
				height: 50rpx;
				margin-top: 15rpx;
			}
			.item-action{
				background-color: #FFFFFF;
				.scroll-text{
					border-left: 8rpx solid #FA3534;
					color: #FA3534;
					font-weight: 400;
				}
			}
		}
		.right-cate-box{
			position: absolute;
			width: calc(100% - 240rpx);
			right: 0;
			height: 100%;
			top:0;
			bottom: 0;
			overflow-x: hidden;
			overflow-y: scroll;
			background: #FFFFFF;
			.scroll-item{
				text-align: left;
			}
			.right-text{
				color: #1a1a1a;
				font-size: 24rpx;
				padding-left: 40rpx;
				line-height: 50rpx;
				height: 50rpx;
				margin-top: 15rpx;
			}
		}
		.left-cate-box::-webkit-scrollbar {
		    display: none;
		}
		.right-cate-box::-webkit-scrollbar {
		    display: none;
		}
	}
</style>
